<template>
  <el-row class="elrow ">
    <el-col :lg="16" :md="12" class="left">
      <div>
        <div class="font-bold text-5xl mb-5">欢迎光临</div>
        <div>此站点是vue3+TS的demo的演示网站</div>
      </div>
    </el-col>
    <el-col :lg="8" :md="12" class="right">
      <h2 class="">欢迎回来</h2>
      <div class="textdiv">
        <span class="text1"></span>
        <span >账号密码登录</span>
        <span class="text2"></span>
      </div>

      <el-form ref="formRef" :model="from" class="w-[250px]" :rules="reles">
        <el-form-item prop="username">
          <el-input v-model="from.username" placeholder="请输入账号" >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="from.password" placeholder="请输入密码" type="password" show-password>
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" round @click="sendData()" class="w-[250px]" color="#626aef" :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted, onBeforeMount } from 'vue';
import { login, getInfo } from '@/services/manager'
import { msgSuccess } from '@/composables/util'
import {useRouter} from 'vue-router'
import { getToken, setToken } from '@/composables/auth'
import { defineStore, storeToRefs } from 'pinia'
import { storeData } from '@/store'


// route的调用
const router = useRouter()
// pinia的数据的调用
const counter = storeData()

// form表单验证规则
const reles = reactive({
  username:[
    { 
      required: true, // 必填
      message: '请输入账号', //提示信息
      trigger: 'blur' // 触发条件
    },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]
})
// from数据
const from = reactive({
  username:'',
  password: '',
})

const formRef = ref(null)
const loading = ref(false)

const sendData = () => {
  formRef.value.validate((valid) => {
    // console.log(valid) //数据为空的时候 值为 false
    if(!valid){
      return false
    }
    loading.value = true

    login(from.username, from.password)
    .then(res => {
      console.log(res)
      if(res.data.msg == 'ok'){
        setToken(res.data.data.token)  // 存储tooken
        msgSuccess(res.data.msg) // 提示信息
        // 登录成功后  获取 用户信息
        getInfo().then((res)=>{
          counter.setUserinfo(res.data.data)   // 存储 user 的信息
          router.push('/')  // 跳转路由
        })
      }
    })
    .catch((err) => {
      console.log(err.data.data.msg)
    })
    .finally(()=>{
      loading.value = false
    })
  })
}
// 监听回车事件
const onKeyUp = (e: Object) => {
  // console.log(e)
  if(e.key == 'Enter'){
    sendData()
  }
}
// 添加键盘监听
onMounted(()=>{
  document.addEventListener('keyup',onKeyUp)
})
onBeforeMount(()=>{
  document.removeEventListener('keyup',onKeyUp)
})

</script>

<style scoped lang="less">
.elrow{
  // min-height: 100vh;
  @apply min-h-screen bg-indigo-500;
  .left{
    @apply flex items-center justify-center flex-col;
    color: white;
  }
  .right{
    @apply bg-light-50 flex items-center justify-center flex-col;
    h2{
      @apply font-bold text-3xl text-gray-800;
    }
    .textdiv{
      @apply flex items-center justify-center my-5 text-gray-400 space-x-2;
      .text1{
        @apply h-[1px] w-16 bg-gray-200;
      }
      .text2{
        @apply h-[1px] w-16 bg-gray-200;
      }
    }
  }
}
</style>
